<template>
	<view class="allhw-vh bg-grey animation-slide-left">
		<im-navBar
			ref="navBarRef"
			backAction
			:navbarText="navbarText"
		></im-navBar>
		<view class="im-add-search tui-flex">  
			<input @focus="toShowSearchFu" @input="inputAccountNum" class=" tui-input im-add-search-input round_view bg-white  tui-center " placeholder="输入账户搜索" 
			 placeholder-class="input-search-placeholder" :value="searchAccountNumTemp" >
			</input>
			<view v-if="searchShow" class="im-add-search-cancel text-green text-30 animation-slide-right" >
				<tui-icon @click="toUnShowSearchFu" name="shut" :size="15" color="#000000"></tui-icon>
			</view>
			<view v-if="searchShow" class="im-add-search-cancel text-green text-30 animation-slide-right" @click=" search">搜索</view>
		
		</view>
		<view >
			<!-- <block v-for="(item,index) in chatList" :key="index">
						<view class="tui-list-item"  @click="detail(item)">
							<image :src="item.avatar"  class="tui-img"></image>
							<view class="item-box">
								<view class="item-title">{{item.nickName}}</view>
								<view class="item-time text-cut">sadsadsadasdsadas</view>
							</view>
						</view>
				<tui-divider height="1" color="black"></tui-divider>
			</block> -->
		</view>
		<im-userInfo ref="userInfoItem" @getInfoSuccessBack="getInfoSuccessBack" ></im-userInfo>
		<tui-no-data v-if="!searchAccountNumTemp || !userInfo.accountNum "  imgUrl="/static/img/img_nodata.png"  btnText="无数据" ></tui-no-data>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchShow: false,
				navbarText:'搜索',
				pageParam:{
					pageNum:1,
					pageSize:20,
					searchKey:''
				},
				chatList: [
					{
						id:1,
						avatar:'https://cdn.quasar.dev/img/avatar.png',
						nickName:'nickName'
					}
				],
				userInfo:{}
			}
		},
		methods: {
			getInfoSuccessBack(data){
				debugger
				this.userInfo = data
			},
			toShowSearchFu(){
				this.searchShow = true
			},
			toUnShowSearchFu(){
				this.searchShow = false
				this.pageParam.searchKey = ''
				this.userInfo = {}
				this.$refs.userInfoItem.setAccountNum('' )
			},
			detail(item){
				
			},
			inputAccountNum(e){
				this.pageParam.searchKey = e.detail.value
			},
			search(){
				uni.showLoading()
				var _that = this 
				this.BenderSdk.BenderHttpApi.getUserInfoByKeyPage().then(res=>{
					
				})
				// setTimeout(function(){
				// 	uni.hideLoading()
				// 	_that.$refs.userInfoItem.setAccountNum(_that.pageParam.searchKey)
				// },1000)
			
			}
		}
	}
</script>

<style scoped>
.im-add-search{
	padding: 20rpx;
	padding-top: 100rpx;
}
.im-add-search-input{
	padding: 10rpx;
}
.im-add-search-cancel{
	margin: 10rpx;
}
.tui-list-item {
		padding: 10rpx 10rpx;
		display: flex;
		align-items: item;
	}
	.item-img {
		height: 80rpx;
		width: 80rpx;
		display: block
	}
	
	.item-box {
		margin-left: 30rpx;
		flex: 1;
		width: 70%;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}
	.item-title {
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	
	}
	
	.item-time {
		color: #999;
		font-size: 20rpx;
	}
</style>
